<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>有奖答题平台</title>
    <!-- ICON -->
    <link href="/frame/images/meatball.ico" type="image/ico" rel="shortcut icon">
    <!-- CSS -->
    <link rel="stylesheet" href="/lib/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/lib/layuiadmin/css/admin.css" media="all">
    <style>
        .ztree * {padding:0; margin:0; /*font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif*/}
        .ztree {margin:0; padding:5px; color:#333;}
        .ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
            text-decoration:none; vertical-align:top; display: inline-block;font-size: 16px}
    </style>
</head>
<body>
<form class="layui-form layui-form-pane">
    <input type="hidden" name="id">
    <input type="hidden" name="createTimeVo">
    <input type="hidden" name="roleSign" >
    <input type="hidden" name="roleView">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row" >
                    <div class="layui-col-md2" >
                        <div class="layui-row">
                            <div class="layui-col-md12">
                                菜单目录结构
                            </div>
                            <div class="layui-col-md12">
                                <div class="meatball-tree-div_dept">
                                    <ul id="menuTree" class="ztree"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md10">
                        <div class="layui-row">
                                <div class="layui-col-md12">
                                    <div class="layui-card" >
                                        <div class="layui-card-body" style="line-height: 50px;height: 50px;vertical-align:middle;margin-bottom: 10px;">
                                            <button class="layui-btn" lay-submit lay-filter="query">
                                                <i class="layui-icon">&#xe615;</i> 查询
                                            </button>
                                            <button class="layui-btn layui-btn-warm" lay-submit lay-filter="removeAuth" title="批量移除权限">
                                                批量移除权限
                                            </button>
                                            <button class="layui-btn layui-btn-warm" lay-submit lay-filter="addAuth" title="批量分配权限">
                                                批量分配权限
                                            </button>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-md12">
                                <table id="table" lay-filter="table"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<!-- JavaScript -->
<script type="text/javascript" src="/lib/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/frame/js/DateUtil.js"></script>
<!--<script type="text/javascript" src="/lib/ztree/js/jquery.ztree.all.min.js"></script>-->
<!-- javascirpt -->
<script type="text/javascript" th:inline="none">
    layui.config({
        base: '/lib/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'ztree', 'ztreecheck'], function() {
        var table = layui.table,
            form = layui.form,
            element = layui.element,
            laytpl = layui.laytpl,
            $ = layui.jquery,
            ztree = layui.ztree;
        //监听工具条

        var setting = {
            async: {
                enable: true,
                type: "post",
                url: "/system/menu/menus"
            },
            check: {
                enable: true
            },
            view: {
                remoteIcon: false,
                showIcon: false,
                nameIsHTML: true
            },
            callback: {
                onCheck: zTreeOnCheck,
                onAsyncSuccess: function () {
                    var treeObj = $.fn.zTree.getZTreeObj("menuTree");
                    var nodes = treeObj.getNodes();
                    for (var i = 0; i < nodes.length; i++) { //设置节点展开
                        treeObj.expandNode(nodes[i], true, false, true);
                    }
                }
            }
        };
        // 渲染下拉树
        function zTreeOnCheck(event, treeId, treeNode) {
            // var treeObj = $.fn.zTree.getZTreeObj("menuTree");
        }
        // 渲染下拉树
        function renderTree(treeNode) {
            ztree.init($("#menuTree"), setting, treeNode);
            var treeObj = $.fn.zTree.getZTreeObj("menuTree");
            var nodes = treeObj.getNodes();
            for (var i = 0; i < nodes.length; i++) { //设置节点展开
                treeObj.expandNode(nodes[i], true, false, true);
            }

        }
        // 批量移除
        form.on('submit(removeAuth)', function(data) {
            var treeObj = $.fn.zTree.getZTreeObj("menuTree");
            var nodes = treeObj.getCheckedNodes(true);
            var vo = {
                remark: '',
                roleSign : '',
            };
            var tableVo = {
                roleName: '',
                id : '',
                roleView:"",
                roleSign:""
            };
            vo = permission(nodes, vo);
            var checkStatus = table.checkStatus('table'); //idTest 即为基础参数 id 对应的值
            tableVo = getTableArr(checkStatus,tableVo);
            if(checkStatus.data.length==0){
                layer.alert('请至少选择一项！', {icon: 5});
                return false;
            }
            //从table中获取角色ID、权限菜单等字段
            var id = tableVo.id.substring(0, tableVo.id.length - 1);
            var roleViewTable = tableVo.roleView.substring(0, tableVo.roleView.length - 1);
            var roleSignTable = tableVo.roleSign.substring(0, tableVo.roleSign.length - 1);
            var roleViewTableArr =  roleViewTable.split(",");
            var roleSignTableArr =  roleSignTable.split(",");
            //从菜单树中选定，菜单项目
            var roleView = vo.remark.substring(0, vo.remark.length - 1);
            var roleSign =vo.roleSign.substring(0, vo.roleSign.length - 1);
            var roleViewArr =  roleView.split(",");
            var roleSignArr =  roleSign.split(",");
            //从菜单数据
            // alert(roleViewTableArr.join(','));
            for(var i=0;i<roleSignArr.length;i++){
                roleViewTableArr.remove(roleViewArr[i]);
                // alert(roleViewTableArr.join(','));
                roleSignTableArr.remove(roleSignArr[i]);
                // alert(roleSignTableArr.join(','));
            }
            data.field.roleView=roleViewTableArr.join(',');
            data.field.roleSign=roleSignTableArr.join(',');
            data.field.createTimeVo=id;
            operate('POST', data.field, true);
            return false;
        });
        function permission(nodes, vo) {
            $.each(nodes, function(index, data) {
                vo.remark += data.name;
                vo.remark += ',';
                vo.roleSign += data.perms;
                vo.roleSign += ',';
            })
            return vo;
        }
        function getTableArr(checkData, vo) {
            $.each(checkData.data, function(index, data) {
                vo.roleName += data.roleName;
                vo.roleName += ',';
                vo.id += data.id;
                vo.id += ',';
                vo.roleSign += data.roleSign;
                vo.roleSign += ',';
                vo.roleView += data.roleView;
                vo.roleView += ',';
            })
            return vo;
        }
        // 批量分配权限
        form.on('submit(addAuth)', function(data) {
            var treeObj = $.fn.zTree.getZTreeObj("menuTree");
            var nodes = treeObj.getCheckedNodes(true);
            var vo = {
                remark: '',
                roleSign : '',
            };
            var tableVo = {
                roleName: '',
                id : '',
            };
            vo = permission(nodes, vo);
            var checkStatus = table.checkStatus('table'); //idTest 即为基础参数 id 对应的值
            tableVo = getTableArr(checkStatus,tableVo);
            var id = tableVo.id.substring(0, tableVo.id.length - 1);
            if(checkStatus.data.length==0){
                layer.alert('请至少选择一项！', {icon: 5});
                return false;
            }
            data.field.roleView=vo.remark.substring(0, vo.remark.length - 1);
            data.field.roleSign=vo.roleSign.substring(0, vo.roleSign.length - 1);
            data.field.createTimeVo=id;

            operate('PUT', data.field, true);
            return false;
        });
        $(function(){
            renderTree(null);
            renderTable('0');
        });
        function renderTable(id) {
            // 绘制表格
            table.render({
                elem: '#table',
                url: '/system/role/table',
                page: true, // 开始分页
                // cellMinWidth: 80, // 定义全局最小宽度
                request: {
                    pageName: 'offset'
                },
                response: {
                    statusCode: 10000
                    // countName: 'total', //数据总数的字段名称，默认：count
                    // dataName: 'list' //数据列表的字段名称，默认：data
                },
                done: function () {
                    $("[data-field='id']").css('display','none');
                },
                cols: [[
                    {type: 'checkbox', field:'checkbox',fixed: 'left'},
                    {type: 'numbers', title: '序号'},
                    {field:'id',title: '名称'},
                    {field:'roleName', title: '名称', width: 180},
                    {field:'roleSign', title: '标志', width: 200},
                    {field:'roleView', title: '权限', width: 200},
                    {field:'remark', title: '备注', width: 200},
                    {field:'createTimeVo', title: '创建时间', width: 180}
                ]]
            });
        }
        table.on('checkbox(table)', function(obj){
            var tableVo = {
                roleName: '',
                id : '',
                roleSign:'',
                roleView:''
            };
            var checkStatus = table.checkStatus('table'); //idTest 即为基础参数 id 对应的值
            tableVo = getTableArr(checkStatus,tableVo);
            var id = tableVo.id.substring(0, tableVo.id.length - 1);
            $.get('/system/role/mulityTree/' + id, function(res) {
                if(res.code == 403) {
                    layer.msg(res.message, {icon: 4});
                } else {
                    // laytpl(editForm.innerHTML).render(res, function(html) {
                    //     popupWin($this.text(), html);
                    // });
                    checkedMenu = res.menus;
                    renderTree(res.menus);
                }
            })
        });

        function operate(ajaxType, data, refresh) {
            var url = '/system/role/auth/';
            $.ajax({
                url: url,
                type: ajaxType,
                async: false,
                data: data,
                success: function(res) {
                    if(res.code == 10000) {
                        if(refresh) {
                            table.reload('table');
                        }
                        layer.msg(res.message, {icon: 1});
                    } else if(res.code == 10003) {
                        layer.msg(res.message, {icon: 4});
                    } else {
                        layer.msg(res.message, {icon: 5});
                    }
                }
            })
        }
        Array.prototype.indexOf = function(val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == val) return i;
            }
            return -1;
        };
        Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }

        };
    });
</script>
</body>
</html>